<template>
  <div class='cards-content'>
<!--    <img src='../../../public/img/bg_4.png' class='bg' alt=''>-->
    <i class='bg' />
    <div v-if="viewType==='home'" class='card_app'>

<!--      <img src='../../../public/img/app1.png' class='logo' alt=''>-->
      <i class='logo'></i>
      <h1 class='title'>睐回APP</h1>
      <h2 class='label'>二奢行家，睐回逛逛</h2>
    </div>
    <div v-else class='list-part'>
      <ul>
        <li v-for='(item,index) in statisticsList' :key='index'>
          <p class='top_label'>{{item.label}}</p>
          <p class='bottom_info'>{{item.info}}</p>
        </li>
      </ul>
    </div>
<!--    <img src='../../../public/img/app2.png' class='app_img' alt=''>-->
    <i class='app_img'/>
  </div>
</template>
<script setup lang="ts">
// export default {
//   name: 'ShowApp'
// }
import { defineProps, reactive } from 'vue'

const props = defineProps({
  // serverList: {
  //   type: Array,
  //   required: true,
  //   default: () => []
  // },
  viewType:{
    type: String,
    required: false,
    default: 'home'//product
  }
});
const statisticsList = reactive([
  {
    label:'16000+',
    info:'累计合作企业'
  },
  {
    label:'400w',
    info:'累计用户会员'
  },
  {
    label:'300+',
    info:'技术团队人数'
  },{
    label:'12w',
    info:'累计鉴定奢侈品'
  }
])
</script>

<style scoped lang='scss'>
.cards-content{
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  i.bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../../../public/img/bg_4.png");
  }
  i.logo {
    position: relative;
    width: 108px;
    height: 108px;
    margin-top: 57px;
    margin-bottom: 17px;
    background-image: url("../../../public/img/app1.png");
    display: block;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .card_app{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  h1.title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 37px;
    color: #000000;
    line-height: 53px;
    text-align: left;
    font-style: normal;
    position: relative;
    padding-bottom: 6px;
  }
  h2.label{
    font-family: PingFangSC, PingFang SC;
    font-weight: 100;
    font-size: 20px;
    color: #000000;
    line-height: 28px;
    letter-spacing: 3px;
    text-align: left;
    font-style: normal;
    position: relative;
  }
  i.app_img {
    background-image: url("../../../public/img/app2.png");
    width: 1118px;
    height: 469px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;

  }
  .list-part {
    position: relative;
    width: 1200px;
    margin-top: 114px;
    ul{
      display: flex;
      align-items: center;
      justify-content: space-around;
      li{
        .top_label{
          font-family: DINAlternate;
          font-weight: bold;
          font-size: 36px;
          color: #000000;
          line-height: 42px;
          text-align: left;
          font-style: normal;
          position: relative;
          &::after{
            content: "";
            width: 29px;
            height: 1px;
            background-color: rgb(0, 0, 0);
            position: absolute;
            left: 50%;
            bottom: -13px;
            transform: rotate(15deg) translate(-50%, 0%);
          }
        }
        .bottom_info{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 14px;
          color: #000000;
          line-height: 26px;
          text-align: center;
          font-style: normal;
          padding-top: 18px;
        }
      }
    }
  }
}

</style>
